<template>
  <div class="MonitorInfo">
    <monitor-chart v-if="chartData.length" id="cpu" tit="CPU使用率（%）" :chartData="chartData" />
    <monitor-chart v-if="chartData.length" id="memory" tit="内存使用率（%）" :chartData="chartData" />
    <line-chart v-if="chartData.length" id="private" tit="内网网卡数据量（B）" :chartData="chartData" />
    <line-chart v-if="chartData.length" id="public" tit="外网网卡数据量（B）" :chartData="chartData" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { 
  format
} from 'silly-datetime'
import * as api from "@/api";
export default {
  data() {
    return {
      chartData: []
    }
  },
  computed: {
    ...mapState(['detailTime']),
  },
  watch: {
    detailTime(v) {
      this.hubRunning()
    }
  },
  methods: {
    async hubRunning() {
      let [start, end] = this.detailTime
      const { code, data } = await api.maxInfo(this).hubRunning({
        offset: 0,
        limit: -1,
        hub_id: this.$route.query.serial,
        start_day: format(start, 'YYYY-MM-DD'),
        end_day: format(end, 'YYYY-MM-DD'),
      });
      if (code === 0) {
        this.chartData = data
      }
    }
  },
  mounted() {
    this.hubRunning()
  }
}
</script>

<style lang="stylus">
.MonitorInfo {
  box-sizing: border-box;
  padding: getPx(40) 0 0 getPx(60);

}
</style>